<template>
	<view>
		<carHeader :title="title"></carHeader>
		<view class="body">
			<view v-for="(item,index) in data" :key="index" class="yhq">
				<text class="price">
					{{item.price}}
				</text>
				<text class="manjian">
					{{item.manjian}}
				</text>
				<text class="jiayouzhan">
					{{item.jiayouzhan}}
				</text>
				<view  v-if="item.zt=='领取'"  class="zt zt1">
					{{item.zt}}
				</view>
				<view v-else-if="item.zt=='已领取'" class="zt zt2">
					{{item.zt}}
				</view>
				
				<text class="time">
					{{item.time1}}—{{item.time2}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'领券中心',
				data:[
					{
						price:20,
						manjian:200,
						jiayouzhan:"郑州",
						time1:"2024.07.12",
						time2:"2024.11.30",
						zt:"领取"
					},
					{
						price:30,
						manjian:300,
						jiayouzhan:"西安",
						time1:"2024.06.13",
						time2:"2024.07.12",
						zt:"已领取"
					}
				]
			};
		}
	}
</script>



<style lang="scss">
	*{
		box-sizing: border-box;
	}
	.carHeader{
		background-size: cover;
		padding-top: 20rpx;
	}
	.body{
		width: 90%;
		background-color: white;
		margin: -150rpx 5% 0 5%;
		overflow: hidden;
		padding-top: 40rpx;
		border-radius: 50rpx;
	}
	.yhq{
		position: relative;
		height: 210rpx;
		margin: 0% 5% 40rpx;
		background-image: url('/static/车联网服务-08我的-07领券中心_slices/组 5.png');
		background-repeat: no-repeat;
	}
	
	.price::before{
		content: '￥';
		font-size: 30rpx;
	}
	.price{
		position: absolute;
		top: 50rpx;
		left: 20rpx;
		color: white;
		font-size: 70rpx;
	}
	
	.manjian::before{
		content: '满';
	}	
	.manjian{
		position: absolute;
		top: 30rpx;
		left: 200rpx;
		color: #FF783C;
		font-weight: bold;
	}
	.manjian::after{
		content: '元可用';
	}
	
	.jiayouzhan::before{
		content: '仅限于';
	}
	.jiayouzhan{
		position: absolute;
		top: 80rpx;
		left: 200rpx;
		font-size: .5em
	}
	.jiayouzhan::after{
		content: '加油站使用';
	}
	
	.zt{
		position: absolute;
		top: 90rpx;
		left: 450rpx;
		width: 125rpx;
		height: 50rpx;
		border-radius: 25rpx;
		color: white;
		text-align: center;
		line-height: 50rpx;
	}
	.zt1{
		background-color:#FF6E1D;
	}
	.zt2{
		background-color:#AEAEAE;
	}
	
	.time{
		position: absolute;
		top: 150rpx;
		left: 200rpx;
		color: #747576;
		font-size: .5em
	}
</style>
